<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>审批被拒绝页面跳转示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .example {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
            background: #f8f9fa;
        }
        .example h3 {
            color: #f56c6c;
            margin-top: 0;
        }
        .url {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            word-break: break-all;
        }
        .description {
            margin: 10px 0;
            color: #666;
        }
        .step-info {
            background: #e8f4fd;
            padding: 10px;
            border-radius: 4px;
            border-left: 4px solid #409eff;
        }
        .button {
            display: inline-block;
            padding: 8px 16px;
            background: #409eff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin: 5px;
        }
        .button:hover {
            background: #66b1ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>审批被拒绝页面跳转示例</h1>
        
        <div class="example">
            <h3>第2步被拒绝（申请审批）</h3>
            <div class="url">localhost/tuizhuceshi/spbjj?step=2</div>
            <div class="description">在申请审批阶段被拒绝</div>
            <div class="step-info">
                <strong>状态栏显示：</strong>第1步完成，第2步高亮（被拒绝）
            </div>
            <a href="javascript:void(0)" class="button" onclick="testStep(2)">测试第2步拒绝</a>
        </div>

        <div class="example">
            <h3>第3步被拒绝（解除合同）</h3>
            <div class="url">localhost/tuizhuceshi/spbjj?step=3</div>
            <div class="description">在解除合同阶段被拒绝</div>
            <div class="step-info">
                <strong>状态栏显示：</strong>第1-2步完成，第3步高亮（被拒绝）
            </div>
            <a href="javascript:void(0)" class="button" onclick="testStep(3)">测试第3步拒绝</a>
        </div>

        <div class="example">
            <h3>第4步被拒绝（调整账单）</h3>
            <div class="url">localhost/tuizhuceshi/spbjj?step=4</div>
            <div class="description">在调整账单阶段被拒绝</div>
            <div class="step-info">
                <strong>状态栏显示：</strong>第1-3步完成，第4步高亮（被拒绝）
            </div>
            <a href="javascript:void(0)" class="button" onclick="testStep(4)">测试第4步拒绝</a>
        </div>

        <div class="example">
            <h3>第5步被拒绝（账单审批）</h3>
            <div class="url">localhost/tuizhuceshi/spbjj?step=5</div>
            <div class="description">在账单审批阶段被拒绝</div>
            <div class="step-info">
                <strong>状态栏显示：</strong>第1-4步完成，第5步高亮（被拒绝）
            </div>
            <a href="javascript:void(0)" class="button" onclick="testStep(5)">测试第5步拒绝</a>
        </div>

        <div class="example">
            <h3>第6步被拒绝（退住审批）</h3>
            <div class="url">localhost/tuizhuceshi/spbjj?step=6</div>
            <div class="description">在退住审批阶段被拒绝</div>
            <div class="step-info">
                <strong>状态栏显示：</strong>第1-5步完成，第6步高亮（被拒绝）
            </div>
            <a href="javascript:void(0)" class="button" onclick="testStep(6)">测试第6步拒绝</a>
        </div>

        <div class="example">
            <h3>第7步被拒绝（费用清算）</h3>
            <div class="url">localhost/tuizhuceshi/spbjj?step=7</div>
            <div class="description">在费用清算阶段被拒绝</div>
            <div class="step-info">
                <strong>状态栏显示：</strong>第1-6步完成，第7步高亮（被拒绝）
            </div>
            <a href="javascript:void(0)" class="button" onclick="testStep(7)">测试第7步拒绝</a>
        </div>

        <div style="margin-top: 30px; padding: 20px; background: #f0f9ff; border-radius: 6px;">
            <h3>JavaScript跳转示例</h3>
            <pre style="background: #2c3e50; color: #ecf0f1; padding: 15px; border-radius: 4px; overflow-x: auto;">
// Vue Router跳转示例
router.push({
  path: '/tuizhuceshi/spbjj',
  query: {
    step: 3,  // 第3步被拒绝
    id: 159   // 业务ID
  }
})

// 或者使用字符串形式
router.push('/tuizhuceshi/spbjj?step=3&id=159')
            </pre>
        </div>
    </div>

    <script>
        function testStep(step) {
            const url = `localhost/tuizhuceshi/spbjj?step=${step}`;
            alert(`测试URL: ${url}\n\n请在前端服务中访问此URL来测试第${step}步被拒绝的效果`);
        }
    </script>
</body>
</html>
